<template>
  <div class="student-courses">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">我的课程</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 课程卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-700">高等数学</h3>
          </div>
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">必修</span>
        </div>
        <div class="space-y-2 mb-4">
          <p class="text-gray-600">教师：张教授</p>
          <p class="text-gray-600">时间：周一、周三 8:00-9:40</p>
          <p class="text-gray-600">地点：教学楼A-101</p>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-green-600 font-semibold">成绩：88</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            查看详情
          </button>
        </div>
      </div>

      <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-700">大学英语</h3>
          </div>
          <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">选修</span>
        </div>
        <div class="space-y-2 mb-4">
          <p class="text-gray-600">教师：李老师</p>
          <p class="text-gray-600">时间：周二、周四 10:00-11:40</p>
          <p class="text-gray-600">地点：教学楼B-203</p>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-green-600 font-semibold">成绩：92</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            查看详情
          </button>
        </div>
      </div>

      <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-purple-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-700">计算机基础</h3>
          </div>
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">必修</span>
        </div>
        <div class="space-y-2 mb-4">
          <p class="text-gray-600">教师：王老师</p>
          <p class="text-gray-600">时间：周五 14:00-17:40</p>
          <p class="text-gray-600">地点：实验楼C-305</p>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-green-600 font-semibold">成绩：85</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            查看详情
          </button>
        </div>
      </div>

      <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-orange-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-700">体育</h3>
          </div>
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">必修</span>
        </div>
        <div class="space-y-2 mb-4">
          <p class="text-gray-600">教师：陈教练</p>
          <p class="text-gray-600">时间：周三 16:00-17:40</p>
          <p class="text-gray-600">地点：体育馆</p>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-green-600 font-semibold">成绩：90</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            查看详情
          </button>
        </div>
      </div>

      <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-red-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-700">思想道德修养</h3>
          </div>
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">必修</span>
        </div>
        <div class="space-y-2 mb-4">
          <p class="text-gray-600">教师：刘教授</p>
          <p class="text-gray-600">时间：周五 8:00-9:40</p>
          <p class="text-gray-600">地点：教学楼A-205</p>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-green-600 font-semibold">成绩：87</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 学生课程页面逻辑
</script>

<style scoped>
.student-courses {
  padding: 2rem;
  background-color: #f8fafc;
  min-height: 100vh;
}
</style> 